Nullish Coalescing in JavaScript: Una Guida Completa all'Assegnazione di Valori Predefiniti

In JavaScript, l'assegnazione di valori predefiniti è un'operazione comune. Tradizionalmente, gli sviluppatori hanno utilizzato l'operatore OR (||) per questo scopo. Tuttavia, l'operatore di nullish coalescing (??), introdotto in ECMAScript 2020, offre un modo più preciso e affidabile per gestire le assegnazioni di valori predefiniti, specificamente quando si ha a che fare con valori null o undefined. Questa guida offre un'analisi approfondita dell'operatore di nullish coalescing, esplorandone la sintassi, il comportamento, le differenze rispetto all'operatore OR e i casi d'uso pratici.

Cos'è il Nullish Coalescing?

L'operatore di nullish coalescing (??) è un operatore logico che restituisce l'operando di destra quando l'operando di sinistra è null o undefined. Altrimenti, restituisce l'operando di sinistra. In termini più semplici, fornisce un valore predefinito solo quando una variabile è strettamente null o undefined.

Sintassi

La sintassi dell'operatore di nullish coalescing è semplice:

            leftOperand ?? rightOperand
            

              
                Copy
              
            
          

Qui, leftOperand è la variabile o l'espressione che si desidera controllare per null o undefined, e rightOperand è il valore predefinito che si desidera assegnare se leftOperand è effettivamente null o undefined.

Esempio

Considera il seguente esempio:

            const username = null ?? "Guest";
console.log(username); // Output: Guest

const age = undefined ?? 25;
console.log(age); // Output: 25

const city = "London" ?? "Unknown";
console.log(city); // Output: London
            

              
                Copy
              
            
          

In questo esempio, a username viene assegnato il valore predefinito "Guest" perché inizialmente è null. Allo stesso modo, a age viene assegnato 25 perché inizia come undefined. Tuttavia, city mantiene il suo valore originale, "London", perché non è né null né undefined.

Valori Nullish e Falsy a Confronto

È fondamentale comprendere la differenza tra valori nullish e falsy in JavaScript. Un valore nullish è o null o undefined. Un valore falsy è un valore che viene considerato falso quando incontrato in un contesto booleano. I valori falsy includono:

• null
• undefined
• 0 (zero)
• NaN (Not a Number)
• '' (stringa vuota)
• false

La distinzione chiave è che l'operatore di nullish coalescing controlla solo per null o undefined, mentre l'operatore OR (||) controlla qualsiasi valore falsy.

La Differenza tra ?? e ||

L'operatore OR (||) è un operatore OR logico che restituisce l'operando di destra se l'operando di sinistra è falsy. Sebbene possa essere utilizzato per assegnare valori predefiniti, può portare a comportamenti inaspettati quando si ha a che fare con valori come 0 o una stringa vuota.

Esempio: Le Insidie di ||

            const quantity = 0 || 10; // Intendiamo un valore predefinito di 10 se la quantità è mancante
console.log(quantity); // Output: 10 (Inaspettato!) perché 0 è un valore falsy

const text = '' || 'Default Text'; //Intendiamo un testo predefinito se il testo è mancante
console.log(text); // Output: Default Text (Inaspettato!) perché '' è un valore falsy
            

              
                Copy
              
            
          

Nel primo esempio, intendevamo assegnare una quantità predefinita di 10 solo se quantity fosse mancante (null o undefined). Tuttavia, poiché 0 è un valore falsy, l'operatore OR ha assegnato erroneamente il valore predefinito. Allo stesso modo, la stringa vuota fa sì che venga mostrato il testo predefinito anche se la stringa esiste (ma è vuota).

Usare ?? per Maggiore Precisione

Riscriviamo l'esempio precedente utilizzando l'operatore di nullish coalescing:

            const quantity = 0 ?? 10;
console.log(quantity); // Output: 0 (Corretto!)

const text = '' ?? 'Default Text';
console.log(text); // Output: '' (Corretto!)
            

              
                Copy
              
            
          

Ora, l'output è quello previsto. L'operatore di nullish coalescing controlla solo per null o undefined, quindi 0 e '' sono trattati come valori validi e i loro valori originali vengono preservati.

Casi d'Uso del Nullish Coalescing

L'operatore di nullish coalescing è utile in vari scenari in cui è necessario fornire valori predefiniti solo quando una variabile è strettamente null o undefined. Ecco alcuni casi d'uso comuni:

1. Gestire Parametri di Funzione Opzionali

Quando si definisce una funzione con parametri opzionali, è possibile utilizzare l'operatore di nullish coalescing per fornire valori predefiniti se i parametri non vengono forniti.

            function greet(name, greeting) {
  const userName = name ?? "User";
  const userGreeting = greeting ?? "Hello";
  console.log(`${userGreeting}, ${userName}!`);
}

greet(); // Output: Hello, User!
greet("Alice"); // Output: Hello, Alice!
greet("Bob", "Greetings"); // Output: Greetings, Bob!
            

              
                Copy
              
            
          

2. Impostare Opzioni di Configurazione Predefinite

Quando si lavora con oggetti di configurazione, è possibile utilizzare l'operatore di nullish coalescing per garantire che vengano utilizzati valori predefiniti se alcune opzioni di configurazione non sono specificate.

            const config = {
  timeout: 5000,
  retries: 3
};

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Timeout predefinito di 10 secondi
  const retries = options.retries ?? 5; // 5 tentativi predefiniti
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Output: Timeout: 5000, Retries: 3
fetchData({}); // Output: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Output: Timeout: 10000, Retries: 5
            

              
                Copy
              
            
          

3. Accedere a Proprietà di Oggetti Annidati

Quando si accede a proprietà di oggetti annidati, l'operatore di nullish coalescing può essere combinato con l'optional chaining (?.) per fornire valori predefiniti se una qualsiasi delle proprietà intermedie è null o undefined.

            const user = {
  profile: {
    address: {
      city: "New York"
    }
  }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Output: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Output: Unknown
            

              
                Copy
              
            
          

4. Lavorare con API e Dati Esterni

Quando si recuperano dati da API o fonti esterne, l'operatore di nullish coalescing può essere utilizzato per fornire valori predefiniti se alcuni campi di dati sono mancanti o hanno valori null o undefined. Considera il recupero di dati utente da diverse regioni. Supponiamo che alcune regioni potrebbero non includere il campo `country` nei loro dati utente.

            async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Unknown Country";
    const timezone = data.timezone ?? "UTC";
    console.log(`User is from: ${country}, Timezone: ${timezone}`);
  } catch (error) {
    console.error("Error fetching user data:", error);
  }
}

// Simulazione di diverse risposte API:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Per testare questo, avresti bisogno di un'API reale o di un mock di fetch.
// A scopo dimostrativo, simuliamo le risposte:
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("Unexpected URL");
};

getUserData(123); // Output: User is from: USA, Timezone: EST
getUserData(456); // Output: User is from: Unknown Country, Timezone: GMT
            

              
                Copy
              
            
          

Precedenza degli Operatori

L'operatore di nullish coalescing ha una precedenza degli operatori relativamente bassa. È inferiore a quella degli operatori OR (||) e AND (&&). Pertanto, quando si combina l'operatore di nullish coalescing con altri operatori logici, è essenziale utilizzare le parentesi per definire esplicitamente l'ordine delle operazioni. Non farlo può causare errori di sintassi o comportamenti inaspettati.

Esempio: Usare le Parentesi per Chiarezza

            // Senza parentesi (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// Con le parentesi (Corretto)
const result = false || (null ?? "Default");
console.log(result); // Output: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Output: null
            

              
                Copy
              
            
          

Nel primo esempio, la mancanza di parentesi causa un SyntaxError perché il motore JavaScript non può determinare l'ordine delle operazioni previsto. Aggiungendo le parentesi, diciamo esplicitamente al motore di valutare prima l'operatore di nullish coalescing. Il secondo esempio è valido; tuttavia, l'output è diverso perché l'espressione || viene valutata per prima.

Compatibilità dei Browser

L'operatore di nullish coalescing (??) è una funzionalità relativamente nuova, quindi è fondamentale considerare la compatibilità dei browser, specialmente se si punta a browser più vecchi. La maggior parte dei browser moderni supporta l'operatore di nullish coalescing, tra cui:

• Chrome 80+
• Firefox 72+
• Safari 13.1+
• Edge 80+
• Node.js 14+

Se hai bisogno di supportare browser più vecchi, puoi usare un transpiler come Babel per convertire il tuo codice in una versione compatibile di JavaScript. Babel trasformerà l'operatore ?? in codice JavaScript equivalente che funziona in ambienti più datati.

Best Practice

Ecco alcune best practice per utilizzare efficacemente l'operatore di nullish coalescing:

• Usa ?? per controlli nullish: Usa l'operatore di nullish coalescing (??) quando vuoi specificamente fornire un valore predefinito solo quando una variabile è null o undefined.
• Usa le parentesi per espressioni complesse: Quando combini l'operatore di nullish coalescing con altri operatori logici, usa le parentesi per definire chiaramente l'ordine delle operazioni.
• Considera la compatibilità dei browser: Controlla la compatibilità dei browser e usa un transpiler se necessario per supportare browser più vecchi.
• Usa in modo coerente: Adotta l'uso di ?? dove appropriato per uno stile di codifica più prevedibile in tutto il progetto.
• Combina con l'optional chaining: Usa ?? in congiunzione con l'optional chaining ?. per accedere in sicurezza e assegnare valori predefiniti a proprietà annidate di oggetti.

Considerazioni Globali

Quando si sviluppa per un pubblico globale, considera i seguenti punti relativi alle assegnazioni di valori predefiniti:

• Localizzazione: I valori predefiniti potrebbero dover essere localizzati in base alla lingua o alla regione dell'utente. Ad esempio, un simbolo di valuta o un formato di data predefinito.
• Norme Culturali: Certi valori predefiniti potrebbero dover essere adattati in base alle norme culturali. Ad esempio, un messaggio di saluto predefinito potrebbe dover essere diverso in culture diverse.
• Accessibilità: Assicurati che i valori predefiniti siano accessibili e comprensibili per gli utenti con disabilità. Fornisci etichette chiare e descrittive per i valori predefiniti nelle interfacce utente.
• Fusi Orari e Date: Quando lavori con date e ore, usa fusi orari e formati di data appropriati per garantire che i valori predefiniti vengano visualizzati correttamente agli utenti in diverse regioni.

Esempio: Localizzazione con il Nullish Coalescing

Diciamo che vuoi visualizzare un messaggio di benvenuto predefinito in diverse lingue in base alla locale dell'utente. Puoi usare l'operatore di nullish coalescing per fornire un messaggio predefinito se un messaggio localizzato non è disponibile.

            function getWelcomeMessage(locale) {
  const localizedMessages = {
    en: "Welcome!",
    fr: "Bienvenue !",
    de: "Willkommen!"
  };

  const message = localizedMessages[locale] ?? "Welcome!"; // Predefinito in inglese se la locale non viene trovata
  return message;
}

console.log(getWelcomeMessage("fr")); // Output: Bienvenue !
console.log(getWelcomeMessage("es")); // Output: Welcome! (Predefinito in inglese)
            

              
                Copy
              
            
          

Conclusione

L'operatore di nullish coalescing (??) è un'aggiunta preziosa al linguaggio JavaScript. Fornisce un modo più preciso e affidabile per assegnare valori predefiniti rispetto all'operatore OR (||), specialmente quando si ha a che fare con valori come 0 o stringhe vuote. Comprendendone la sintassi, il comportamento e i casi d'uso, puoi scrivere codice più pulito e manutenibile che gestisce accuratamente le assegnazioni di valori predefiniti. Ricorda di considerare la compatibilità dei browser, la precedenza degli operatori e le considerazioni globali quando usi l'operatore di nullish coalescing nei tuoi progetti.

Seguendo le best practice delineate in questa guida, puoi sfruttare efficacemente l'operatore di nullish coalescing per migliorare la qualità e l'affidabilità del tuo codice JavaScript, rendendolo più robusto e facile da capire. Ricorda di dare sempre la priorità alla chiarezza e alla manutenibilità nel tuo codice, e l'operatore di nullish coalescing può essere uno strumento potente per raggiungere questi obiettivi.